<template>
  <div>
    <div class="teacher_input">
        <a-input placeholder="Basic usage" v-model="value" enter-button="Search" />
      <div class="teacher_button">
        <a-button type="primary" @click="onClickSearch">查询</a-button>
        <a-button type="primary" @click="onClickReset">重置</a-button>
      </div>

     
    </div>
    <a-table
      :columns="columns"
      :data-source="searchList"
      bordered
      :pagination="{total:searchList.length,defaultPageSize:5}"
    >
      <template slot="avatar" slot-scope="props">
        <img :src="props" alt width="45px" />
      </template>
      <template slot="created_at" slot-scope="props">
        <span>{{props|timeFilter}}</span>
      </template>
      <template slot="status" slot-scope="props">
        <span>{{props|statusFilter}}</span>
      </template>
      <template slot="operation" slot-scope="text,record">
        <div class="operation">
          <a-button type="primary" shape="circle" icon="search" @click="onClickDetail(record)" />
          <a-button type="danger" shape="circle" icon="delete" @click="onClickDelete(record)" />
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      dataList: [], //暂存的数据
      searchList: [], //展示的的数据
      columns: [
        {
          title: "UID",
          dataIndex: "uid",
        },
        {
          title: "姓名",
          dataIndex: "nickname",
        },
        {
          title: "头像",
          dataIndex: "avatar",
          scopedSlots: { customRender: "avatar" },
        },
        {
          title: "手机号",
          dataIndex: "mobile",
        },
        {
          title: "状态",
          dataIndex: "status",
          scopedSlots: { customRender: "status" },
        },
        {
          title: "时间",
          dataIndex: "created_at",
          scopedSlots: { customRender: "created_at" },
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
    };
  },

  filters: {
    //时间戳转换
    timeFilter(value) {
      var date = new Date(value * 1000).toLocaleString();
      return date;
    },
    //状态
    statusFilter(value) {
      console.log(value);
      var name = "";
      if (value === 0) {
        name = "禁用";
      } else if (value === 1) {
        name = "启动";
      }
      return name;
    },
  },
  //详情页
  methods: {
    onClickDetail(record) {
      console.log(record);
      this.$router.push({
        path: "/details",
        query: {
          obj: record,
        },
      });
    },
    //删除
    onClickDelete(record) {
      var index = this.dataList.findIndex((element) => {
        return element.uid == record.uid;
      });
      if (index != -1) {
        this.dataList.splice(index, 1);
      }
    },
    //搜素
    onClickSearch() {
      if (this.value == "") {
        return this.$message.info("输入内容不能为空！");
      }
      this.searchList = []; //把存放的数据清空
      this.dataList.forEach((item) => {  //在循环存放的全部数据
        if (item.nickname.includes(this.value)) { //判断寻找关键词进行搜素展示
          this.searchList.push(item);
        }
      });
    },
    //重置
    onClickReset() {
      this.searchList = this.dataList;
    },
  },
  mounted() {
    this.$axios.get("http://localhost:8080/list.json").then((res) => {
      this.dataList = res.data;
      this.searchList = res.data;
      console.log(this.dataList);
    });
  },
};
</script>

<style>
.operation {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.ant-table-thead tr th {
  text-align: center;
}
.ant-table-tbody tr td {
  text-align: center;
}
.teacher_input {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.teacher_button{
  width: 100%;
  display: flex;
}
.teacher_button button{
  margin-left: 10px;
}
</style>